<template>
 <div class="login_container">
 <!-- :options="playerOptions" -->
<!-- <video-player class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"

             poster="options"
            >
      </video-player> -->
    <video src="../../assets/video.mp4"  class="shipin" :loop="loop=true" :autoplay="autoplay" preload muted ></video>
     <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../../assets/logo1.33ef7fa0.png" alt="">
      </div>
      <!-- 登录表单区域 -->
      <el-form ref="loginForm"  label-width="0px" class="login_form" :model="loginForm">
        <!-- 用户名 -->
        <el-form-item prop="account">
          <el-input v-model="loginForm.account" prefix-icon="el-icon-user-solid">
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" prefix-icon="el-icon-unlock" type="password" show-password>
          </el-input>
        </el-form-item>
         <el-form-item prop="code">
          <el-input type="code" clearable placeholder="验证码" v-model="loginForm.code"  autocomplete="off"  prefix-icon="el-icon-success"></el-input>
              <img :src="verifyCode" @click="yanzhengma" class="code-image" />
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="danger" @click="submit" class="login-button">登录</el-button>
        </el-form-item>
      </el-form>
    </div>

 </div>
</template>

<script>
// import store from './store'
import { loginApi, verificationCode } from '@/api/user'
// import { verificationCode } from '@/api/user'
export default {
  name: 'VideoPlayer',
  data () {
    return {
      autoplay: true,
      verifyCode: '',
      player: null,
      // 这是登录表单的数据绑定对象
      loginForm: {
        account: 'shenlingadmin',
        code: '',
        key: '047888C11983697815D1F91C1676702187841',
        password: '123456',
        bindAccount: '',
        bindPassword: '',
        signAccount: '',
        signPassword: '',
        tenant: ''
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }

    }
  },

  methods: {
    async  yanzhengma () {
      const re = await verificationCode()
      // console.log(re)
      const src = window.URL.createObjectURL(re)// 这里也是关键,调用window的这个方法URL方法
      this.verifyCode = src

      // this.verifyCode = `data: image/jpeg;base64,${btoa(new Uint8Array(re.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`

      // 不可用
      // store.state.imgUrl = `data: image/jpeg;base64,${btoa(new Uint8Array(re.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
    },
    async submit () {
      try {
        const valid = await this.$refs.loginForm.validate()
        console.log(valid)
        if (valid) {
          const res = await loginApi(this.loginForm)
          console.log(res.data.token)
          // 存储vuex
          this.$store.commit('user/loginApitoken', res.data.token.token)
          this.$router.push('/')
          this.$message.success('登陆成功')
        }
      } catch (error) {
        console.log(error)
      }
    }
  },
  created () {
    this.yanzhengma()
  }
}
</script>

<style lang="scss" scoped>
.video-js {
  width: 100%;
  height: 99vh;
}
::-webkit-scrollbar {
     width: 0 !important;
   }
   ::-webkit-scrollbar {
     width: 0 !important;height: 0;
   }
  //

 .login_box {
  position: absolute;
    top: 45%;
    left: 45%;
    margin: -180px 0 0 -160px;
    width: 380px;
    height: 397px;
    padding: 36px 40px;
    background: #fff;
    border-radius: 10px;
 }
.avatar_box {
  // width: 90px;
  margin-left: 80px;
  margin-bottom: 48px;
}
img {
  height: 60px;
}
.login-button {
    width: 100%;
    height: 54px;
    margin-bottom: 14px;
    margin-top: 22px;
    background-color: #e15536;
    border: 0;
    font-size: 18px;
    color: #fff;
    font-weight: 700
}
.code-image {
    display: inline-block;
    vertical-align: top;
    width: 71px;
    height: 32px;
    cursor: pointer;
    margin-left: 10px;
    position: absolute;
    right: 10px;
    top: 9px;
}
.shipin {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 99.5%;
height: auto;
width: auto;
}

</style>
